<template>
  <div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="page-content">

            <!-- ***** Featured Games Start ***** -->
            <div class="row">
              <div class="col-lg-8">
                <div class="featured-games header-text">
                  <div class="heading-section">
                    <h4><em>Live</em> Streams</h4>
                  </div>
                  <div class="owl-features owl-carousel">
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-01.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>CS-GO<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-02.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>Gamezer<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-03.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>Island Rusty<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-01.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>CS-GO<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-02.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>Gamezer<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                    <div class="item">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/featured-03.jpg" alt="">
                        <div class="hover-effect">
                          <h6>2.4K Streaming</h6>
                        </div>
                      </div>
                      <h4>Island Rusty<br><span>249K Downloads</span></h4>
                      <ul>
                        <li><i class="fa fa-star"></i> 4.8</li>
                        <li><i class="fa fa-download"></i> 2.3M</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="top-streamers">
                  <div class="heading-section">
                    <h4><em>Top</em> Streamers</h4>
                  </div>
                  <ul>
                    <li>
                      <span>01</span>
                      <img src="../assets/template-res/assets/images/avatar-01.jpg" alt="" style="max-width: 46px; border-radius: 50%; margin-right: 15px;">
                      <h6><i class="fa fa-check"></i> LahutaM</h6>
                      <div class="main-button">
                        <a href="#">Follow</a>
                      </div>
                    </li>
                    <li>
                      <span>02</span>
                      <img src="../assets/template-res/assets/images/avatar-02.jpg" alt="" style="max-width: 46px; border-radius: 50%; margin-right: 15px;">
                      <h6><i class="fa fa-check"></i> Kengan</h6>
                      <div class="main-button">
                        <a href="#">Follow</a>
                      </div>
                    </li>
                    <li>
                      <span>03</span>
                      <img src="../assets/template-res/assets/images/avatar-03.jpg" alt="" style="max-width: 46px; border-radius: 50%; margin-right: 15px;">
                      <h6><i class="fa fa-check"></i> Areluwa</h6>
                      <div class="main-button">
                        <a href="#">Follow</a>
                      </div>
                    </li>
                    <li>
                      <span>04</span>
                      <img src="../assets/template-res/assets/images/avatar-04.jpg" alt="" style="max-width: 46px; border-radius: 50%; margin-right: 15px;">
                      <h6><i class="fa fa-check"></i> Omeg</h6>
                      <div class="main-button">
                        <a href="#">Follow</a>
                      </div>
                    </li>
                    <li>
                      <span>05</span>
                      <img src="../assets/template-res/assets/images/avatar-01.jpg" alt="" style="max-width: 46px; border-radius: 50%; margin-right: 15px;">
                      <h6><i class="fa fa-check"></i> GangTeam</h6>
                      <div class="main-button">
                        <a href="#">Follow</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- ***** Featured Games End ***** -->

            <!-- ***** Live Stream Start ***** -->
            <div class="live-stream">
              <div class="col-lg-12">
                <div class="heading-section">
                  <h4><em>Most Popular</em> Live Stream</h4>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-05.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-01.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> Kengan Omeg</span>
                      <h4>Just Talking With Fans</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-06.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-02.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> LahutaMalc</span>
                      <h4>CS-GO 36 Hours Live Stream</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-07.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-03.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> Areluwa</span>
                      <h4>Maybe Nathej Allnight Chillin'</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-08.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-04.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> NewGangTeam</span>
                      <h4>Live Streaming Till Morning</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-07.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-01.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> Kengan Omeg</span>
                      <h4>Just Talking With Fans</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-08.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-02.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> LahutaMalc</span>
                      <h4>CS-GO 36 Hours Live Stream</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-05.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-03.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> Areluwa</span>
                      <h4>Maybe Nathej Allnight Chillin'</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                  <div class="item">
                    <div class="thumb">
                      <img src="../assets/template-res/assets/images/stream-06.jpg" alt="">
                      <div class="hover-effect">
                        <div class="content">
                          <div class="live">
                            <a href="#">Live</a>
                          </div>
                          <ul>
                            <li><a href="#"><i class="fa fa-eye"></i> 1.2K</a></li>
                            <li><a href="#"><i class="fa fa-gamepad"></i> CS-GO</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="down-content">
                      <div class="avatar">
                        <img src="../assets/template-res/assets/images/avatar-04.jpg" alt="" style="max-width: 46px; border-radius: 50%; float: left;">
                      </div>
                      <span><i class="fa fa-check"></i> NewGangTeam</span>
                      <h4>Live Streaming Till Morning</h4>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="main-button">
                    <a href="streams.html">Load More Streams</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- ***** Live Stream End ***** -->

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>



import 'bootstrap/dist/js/bootstrap.js'
import Isotope from 'isotope-layout'
import "../assets/template-res/assets/js/owl-carousel.js"
import "../assets/template-res/assets/js/tabs.js"
import "../assets/template-res/assets/js/popup.js"
import 'swiper';
import 'swiper/css/swiper.min.css';

export default {
  name: 'StreamsView',
  components: {

  },
  mounted() {
    this.customInit();

  },
  methods:{
    //模板中自定义的初始化方法
    customInit: function () {

      //region  WOW JS 初始化相关操作
      $(window).on('load', function () {
        if ($(".wow").length) {
          let wow = new WOW({
            boxClass: 'wow',      // Animated element css class (default is wow)
            animateClass: 'animated', // Animation css class (default is animated)
            offset: 20,         // Distance to the element when triggering the animation (default is 0)
            mobile: true,       // Trigger animations on mobile devices (default is true)
            live: true,       // Act on asynchronously loaded content (default is true)
          });
          wow.init();
        }
      });
      //endregion

      //region （描述：监听窗口滑动）
      $(window).scroll(function () {
        let scroll = $(window).scrollTop();
        let box = $('.header-text').height();
        let header = $('header').height();
        if (scroll >= box - header) {
          $("header").addClass("background-header");
        } else {
          $("header").removeClass("background-header");
        }
      });
      //endregion

      //region （描述：同位素相关初始化操作）
      let elem = null;

      if ($('.grid').length) {
        elem = $('.grid')[0];
      }
      let $grid = null;
      if (elem) {
        $grid = new Isotope(elem, {
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
        });
      }
      $('.filters ul li').click(function () {
        $('.filters ul li').removeClass('active');
        $(this).addClass('active');

        let data = $(this).attr('data-filter');

        if ($grid) {
          $grid.isotope({
            filter: data
          })
        }
      });
      //endregion


      let width = $(window).width();
      $(window).resize(function () {
        if (width > 992 && $(window).width() < 992) {
          location.reload();
        } else if (width < 992 && $(window).width() > 992) {
          location.reload();
        }
      })


      $(document).on("click", ".naccs .menu div", function () {
        let numberIndex = $(this).index();

        if (!$(this).is("active")) {
          $(".naccs .menu div").removeClass("active");
          $(".naccs ul li").removeClass("active");

          $(this).addClass("active");
          $(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

          let listItemHeight = $(".naccs ul")
              .find("li:eq(" + numberIndex + ")")
              .innerHeight();
          $(".naccs ul").height(listItemHeight + "px");
        }
      });

      $('.owl-features').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 2
          },
          1200: {
            items: 3
          },
          1800: {
            items: 3
          }
        }
      })

      $('.owl-collection').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          800: {
            items: 2
          },
          1000: {
            items: 3
          }
        }
      })

      $('.owl-banner').owlCarousel({
        items: 1,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 1
          },
          1000: {
            items: 1
          }
        }
      })


      //region （描述：菜单按键点击事件绑定）
      // Menu Dropdown Toggle
      if ($('.menu-trigger').length) {
        $(".menu-trigger").on('click', function () {
          $(this).toggleClass('active');
          $('.header-area .nav').slideToggle(200);
        });
      }
      //endregion


      // Menu elevator animation
      $('.scroll-to-section a[href*=\\#]:not([href=\\#])').on('click', function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          let target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

          if (target.length) {
            let width = $(window).width();
            if (width < 991) {
              $('.menu-trigger').removeClass('active');
              $('.header-area .nav').slideUp(200);
            }
            $('html,body').animate({
              scrollTop: (target.offset().top) - 80
            }, 700);
            return false;
          }
        }
      });

      $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('.scroll-to-section a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");

          $('.scroll-to-section a').each(function () {
            $(this).removeClass('active');
          })
          $(this).addClass('active');

          let target = this.hash, menu = target;
          target = $(this.hash);
          $('html, body').stop().animate({
            scrollTop: (target.offset().top) - 79
          }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
          });
        });
      });

      function onScroll(event) {
        let scrollPos = $(document).scrollTop();
        $('.nav a').each(function () {
          let currLink = $(this);

          let refElement = $(currLink.attr("href"));

          if (refElement.length) {
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
              $('.nav ul li a').removeClass("active");
              currLink.addClass("active");
            } else {
              currLink.removeClass("active");
            }
          }
        });
      }


      // Page loading animation
      $(window).on('load', function () {
        if ($('.cover').length) {
          $('.cover').parallax({
            imageSrc: $('.cover').data('image'),
            zIndex: '1'
          });
        }

        $("#preloader").animate({
          'opacity': '0'
        }, 600, function () {
          setTimeout(function () {
            $("#preloader").css("visibility", "hidden").fadeOut();
          }, 300);
        });
      });


      const dropdownOpener = $('.main-nav ul.nav .has-sub > a');

      // Open/Close Submenus
      if (dropdownOpener.length) {
        dropdownOpener.each(function () {
          let _this = $(this);

          _this.on('tap click', function (e) {
            let thisItemParent = _this.parent('li'),
                thisItemParentSiblingsWithDrop = thisItemParent.siblings('.has-sub');

            if (thisItemParent.hasClass('has-sub')) {
              let submenu = thisItemParent.find('> ul.sub-menu');

              if (submenu.is(':visible')) {
                submenu.slideUp(450, 'easeInOutQuad');
                thisItemParent.removeClass('is-open-sub');
              } else {
                thisItemParent.addClass('is-open-sub');

                if (thisItemParentSiblingsWithDrop.length === 0) {
                  thisItemParent.find('.sub-menu').slideUp(400, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                } else {
                  thisItemParent.siblings().removeClass('is-open-sub').find('.sub-menu').slideUp(250, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                }
              }
            }

            e.preventDefault();
          });
        });
      }


    }

  },
}
</script>